<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"></detail-nav-bar>
    <scroll class="content" :pullUpLoad="true">
      <detailswiper :topImages="topImages"></detailswiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo"></detail-goods-info>
      <detail-param-info :paramInfo="paramInfo"></detail-param-info>
    </scroll>

  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import {getDetail,Goods,Shop,GoodsParam} from "network/detail";
  import Detailswiper from "./childComps/Detailswiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import Scroll from "components/common/scroll/Scroll";
  import DetailParamInfo from "./childComps/DetailParamInfo";

  export default {
      name: "Detail",
      components:{
        DetailNavBar,
        Detailswiper,
        DetailBaseInfo,
        DetailShopInfo,
        Scroll,
        DetailGoodsInfo,
        DetailParamInfo
      },
      data(){
          return {
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{}

          }
      },
      created() {
        // console.log(this.$router.params)
          this.iid = this.$route.params.iid

        getDetail(this.iid).then(res => {
          console.log(res);
          const data = res.result
          this.topImages = data.itemInfo.topImages

          this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

          this.shop = new Shop(data.shopInfo)
          this.detailInfo = data.detailInfo;

          this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
        })

      }
    }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 99;
    background-color: #ffffffff;
    height: 100vh;
  }
  .content {
   height: calc(100% - 44px);
  }
  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #ffffff;
  }
</style>
